import React from "react";
import { View, ScrollView, Image, StatusBar } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Link } from "expo-router";
import {
  Search,
  MoreVertical,
  Smartphone,
  User,
  PlusCircle,
  Monitor,
  UserSearch,
} from "lucide-react-native";
import { Button } from "~/components/ui/button";
import { Text } from "~/components/ui/text";

const App = () => {
  return (
    <SafeAreaView className="flex-1 bg-gray-50">
      <StatusBar barStyle="dark-content" backgroundColor="#f9fafb" />

      {/* Header */}
      <View className="flex-row justify-between items-center px-4 py-3">
        <View className="flex-row items-center">
          <View className="w-12 h-12 bg-purple-600 rounded-2xl items-center justify-center mr-3">
            <Text className="text-white text-xl font-bold">B</Text>
          </View>
          <Text className="text-purple-600 text-3xl font-bold">Blip</Text>
        </View>
        <View className="flex-row">
          <Button variant="ghost" size="icon" className="mr-2">
            <Search size={24} color="#666" />
          </Button>
          <Link href="/settings" asChild>
            <Button variant="ghost" size="icon">
              <MoreVertical size={24} color="#666" />
            </Button>
          </Link>
        </View>
      </View>

      <ScrollView className="flex-1 ">
        {/* Send directly section */}
        <View className="px-4 py-6 flex flex-col gap-y-10">
          <Text className="text-purple-600 text-xl font-semibold mb-6">
            Send directly
          </Text>

          <View className="flex-row justify-between">
            <Link href="/device" asChild>
              <Button
                variant="ghost"
                className="items-center p-0 h-auto bg-transparent"
              >
                <View className="w-20 h-20 bg-purple-600 rounded-full items-center justify-center mb-3">
                  <Smartphone size={40} color="#fff" />
                </View>
                <Text className="text-center text-sm font-medium w-20 leading-4">
                  OP5A29L1
                </Text>
              </Button>
            </Link>

            <Button
              variant="ghost"
              className="items-center p-0 h-auto bg-transparent"
            >
              <View className="w-20 h-20 bg-purple-600 rounded-full items-center justify-center mb-3">
                <Smartphone size={40} color="#fff" />
              </View>
              <Text className="text-center text-sm font-medium w-20 leading-4">
                Sterne的{"\n"}iPhone se
              </Text>
            </Button>

            <Link href="/iroh" asChild>
              <Button
                variant="ghost"
                className="items-center p-0 h-auto bg-transparent"
              >
                <View className="w-20 h-20 bg-green-600 rounded-full items-center justify-center mb-3">
                  <Monitor size={40} color="#fff" />
                </View>
                <Text className="text-center text-sm font-medium w-20 leading-4">
                  Iroh P2P{"\n"}Sharing
                </Text>
              </Button>
            </Link>

            <Button
              variant="ghost"
              className="items-center p-0 h-auto bg-transparent"
            >
              <View className="w-20 h-20 bg-purple-300 rounded-full items-center justify-center mb-3">
                <User size={30} color="#fff" />
                <View className="absolute bottom-1 right-1 w-6 h-6 bg-gray-600 rounded-full items-center justify-center">
                  <UserSearch size={14} color="#fff" />
                </View>
              </View>
              <Text className="text-center text-sm font-medium w-20 leading-4">
                Search for{"\n"}someone
              </Text>
            </Button>
          </View>
        </View>

        {/* Received section */}
        <View className="px-4 pb-6 flex flex-col gap-y-10 mt-6">
          <Text className="text-gray-600 text-lg font-semibold mb-4">
            Received
          </Text>

          <View className="bg-white rounded-3xl overflow-hidden shadow-sm">
            {/* Stacked images effect */}
            <View className="relative h-64 items-center justify-center">
              {/* Background stacked images */}
              <View className="absolute inset-0 items-center justify-center">
                {Array.from({ length: 15 }, (_, i) => (
                  <View
                    key={i}
                    className="absolute w-16 h-20 bg-gray-200 rounded-lg border border-gray-300"
                    style={{
                      transform: [
                        { translateX: ((i % 5) - 2) * 8 },
                        { translateY: (Math.floor(i / 5) - 1) * 12 },
                        { rotate: `${((i % 3) - 1) * 3}deg` },
                      ],
                      zIndex: 15 - i,
                    }}
                  />
                ))}
              </View>

              {/* Main visible images */}
              <View className="relative z-20">
                <Image
                  source={{
                    uri: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=300&fit=crop",
                  }}
                  className="w-72 h-48 rounded-2xl"
                  resizeMode="cover"
                />
                <Image
                  source={{
                    uri: "https://images.unsplash.com/photo-1602233158242-3ba0ac4d2167?w=400&h=300&fit=crop",
                  }}
                  className="absolute -bottom-6 -right-6 w-40 h-32 rounded-xl border-4 border-white"
                  resizeMode="cover"
                />
              </View>
            </View>

            {/* Footer with device info */}
            <View className="p-4 flex-row items-center justify-between">
              <View className="flex-row items-center">
                <View className="w-12 h-12 bg-purple-600 rounded-full items-center justify-center mr-3">
                  <Smartphone size={24} color="#fff" />
                </View>
                <View>
                  <Text className="text-lg font-semibold text-gray-900">
                    62 Items
                  </Text>
                  <Text className="text-gray-500">From OP5A29L1</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;
